<template>
<div class="systemConfig">
  <el-button class="config-button" type="primary" @click="saveConfig">保存</el-button>
  <el-descriptions :column="4" direction="vertical" border>
    <el-descriptions-item>
      <template slot="label">
        微信小程序id
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" v-model="model.wxAppId"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        微信小程序密钥
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" :placeholder="'*'.repeat(model.wxSecret * 1)" v-model="secretModel.wxSecret"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        微信支付接口Key
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" :placeholder="'*'.repeat(model.apiKey * 1)" v-model="secretModel.apiKey"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        微信支付商户id
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" :placeholder="'*'.repeat(model.mchId * 1)" v-model="secretModel.mchId"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        收款单位
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" v-model="model.payCompanyName"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        收款单位开户银行
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" v-model="model.payBankName"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        收款账号
      </template>
      <el-input type="textarea" :autosize="{minRows: 1}" v-model="model.payBankNum"></el-input>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        微信支付退款证书
      </template>
      <div class="config-cert">
        <span v-if="model.certContent === '0'" class="y-info">未上传</span>
        <span v-else-if="model.certContent === '1'" class="y-success">已上传</span>
        <span v-else-if="model.certContent === '2'" class="y-warning">未保存</span>
        <el-upload
          action=""
          :show-file-list="false"
          :http-request="() => {}"
          :multiple="false"
          :on-change="onUploadChange"
          :limit="1"
          accept=".p12"
          :auto-upload="false">
          <el-link type="primary" :underline="false">
            <i class="el-icon-upload2" title="点击上传"></i>
          </el-link>
        </el-upload>
<!--        <el-popconfirm
          v-if="!!model.certContent"
          title="证书一旦删除无法恢复，请确认是否删除证书！"
          @confirm="delConfig">
          <el-link type="danger" :underline="false" slot="reference">
            <i class="el-icon-delete" title="删除"></i>
          </el-link>
        </el-popconfirm>-->
      </div>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        备注信息
      </template>
      <el-input type="textarea" class="config-remarks" :autosize="{minRows: 3}" :maxlength="200" show-word-limit v-model="model.remarks"></el-input>
    </el-descriptions-item>
  </el-descriptions>
</div>
</template>

<script>
export default {
  name: "systemConfig",
  inject: ['defaultUploadChange', 'fileToBase64', 'dataURLtoBlob'],
  data(){
    return{
      secretModel:{
        wxSecret: '',
        apiKey: '',
        mchId: '',
        certContent: ''
      },
      model:{
        id: '',
        apiKey: '',
        certContent: '',
        mchId: '',
        payBankName: '',
        payBankNum: '',
        payCompanyName: '',
        remarks: '',
        wxAppId: '',
        wxSecret: ''
      },
      tenantId: '',
    }
  },
  created(){
    this.initTenantId();
    this.initInfo();
  },
  methods:{
    initTenantId(){
      let user = localStorage.getItem('user');
      if(user) {
        user = JSON.parse(user);
        this.tenantId = user.tenantId;
      }
    },
    initInfo(){
      this.$yAxios({
        url: this.$api.self.queryTenantConfig,
        data:{
          id: this.tenantId
        },
        loading: true
      }, info => {
        if(info){
          this.$set(this, 'model', Object.gain(info, Object.keys(this.model), ''));
        }
      })
    },
    onUploadChange(fileObj){
      this.defaultUploadChange(fileObj, async (info, file) => {
        this.secretModel.certContent = await this.fileToBase64(file);
        this.$message({
          type: 'success',
          message: '上传成功'
        });
        this.model.certContent = '2';
      })
    },
    download(){
      //TODO 暂时不允许下载
      /*try{
        let blob = this.dataURLtoBlob(this.model.certContent);
        let link = document.createElement('a')
        link.download = '证书.p12' // 要下载的文件名
        link.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(link);
        link.click();
        // 然后移除
        document.body.removeChild(link);
      }catch(e){
        this.$alert('证书格式错误，请重新上传证书！');
        this.model.certContent = '';
      }*/
    },
    delConfig(){
      this.model.certContent = '';
    },
    saveConfig(){
      let data = {...this.model};
      Object.keys(this.secretModel).map(key => {
        if(this.secretModel[key]){
          data[key] = this.secretModel[key]
        }else{
          this.$delete(data, key);
        }
      });
      this.$yAxios({
        url: this.$api.self.saveTenantConfig,
        data,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        Object.keys(this.secretModel).map(key => {
          this.secretModel[key] = '';
        });
        this.initInfo();
      });
    }
  }
}
</script>

<style scoped lang="less">
.systemConfig{
  height: 100%;
  overflow-y: auto;
  position: relative;
  .config-cert{
    font-size: 16px;
    display: inline-flex;
    .el-link{
      font-size: inherit;
      padding-left: 8px;
    }
  }
  /deep/.el-descriptions-item__content{
    padding: 5px 0;
    >.el-textarea{
      &.config-remarks >.el-textarea__inner{
        text-align: left;
      }
      >.el-textarea__inner{
        border: none;
        border-radius: 0;
        text-align: center;
        resize: none;
        padding: 5px;
        &:focus::-webkit-input-placeholder{
          color: #ccc;
        }
        &::-webkit-input-placeholder{
          color: #000;
        }
      }
    }
  }
  >.config-button{
    float: right;
    margin-bottom: 15px;
  }
}
</style>